<template>
  <a-layout-header class="u-header-bar">
    <ARow class="u-header-row">
      <!--头部菜单-->
      <ACol class="u-header-col u-header-col-left" span="8">
        <div class="u-logo">
          <a-avatar :size="36" :src="sysLogo"></a-avatar>
          <span class="u-ism-title">{{sysName}}</span>
        </div>
<!--        <a-breadcrumb :routes="breadcrumbRoutes" style="line-height: 46px">-->
<!--          <template #itemRender="{ route, paths }">-->
<!--            <router-link v-if="route.index == 0" :to="route.url">-->
<!--              <HomeOutlined />-->
<!--            </router-link>-->
<!--            <router-link v-else-if="route.url == null">-->
<!--              {{ route.name }}-->
<!--            </router-link>-->
<!--            <router-link v-else :to="route.url">-->
<!--              {{ route.name }}-->
<!--            </router-link>-->
<!--          </template>-->
<!--        </a-breadcrumb>-->
      </ACol>
      <ACol class="u-header-col ivz-header-col-right" span="16">
        <ul style="list-style: none; padding: 0px; margin: 0px">
          <li class="u-opera-col">
            <a-avatar :src="user.avatar" :size="32" :load-error="loadError" />
            <a-dropdown placement="bottom" class="u-profile-dropdown">
              <span class="ant-dropdown-link" @click.prevent>
                <span style="margin: 0px 5px; vertical-align: 2px">{{user.name}}</span>
                <DownOutlined />
              </span>
              <template #overlay>

                <a-menu @click="quickOpera">
                  <a-menu-item key="profile">
                    <UIcon type="iz-icon-profile" style="font-size: 16px"/>
                    <span>个人资料</span>
                  </a-menu-item>
                  <a-menu-item key="pwd">
                    <LockFilled style="font-size: 16px"/><span>修改密码</span>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout">
                    <LogoutOutlined style="font-size: 16px" /><span>退出登录</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </li>
          <li class="u-opera-col">
            <a-tooltip title="全屏">
              <FullscreenOutlined :style="{fontSize: '16px'}" @click="fullScreen"/>
            </a-tooltip>
          </li>
          <li style="clear: both"></li>
        </ul>
      </ACol>
      <div style="clear: both"></div>
    </ARow>
  </a-layout-header>
</template>

<script>
import {logout} from "@/api";
import screenfull from 'screenfull'
import {msgError} from "@/utils/message";
import {mapGetters, mapMutations} from "vuex";
import {
  DownOutlined,
  FullscreenOutlined,
  HomeOutlined,
  LockFilled,
  LogoutOutlined,
  NotificationFilled,
  ReloadOutlined
} from '@ant-design/icons-vue'
import {inject} from "vue";
import {GlobalConfigKey} from "@/utils/ProvideKeys";

export default {
  name: "LayoutHeader",
  props: ['reload'],
  computed: {
    ...mapGetters({
      user: 'sys/user',
      views: 'sys/views',
      sysName: 'sys/sysName',
      sysLogo: 'sys/sysLogo',
      taskBarData: 'sys/taskBarData',
      idMenuMaps: 'sys/idMenuMaps',
      selectedKeys: 'sys/selectedKeys',
      activityMenu: 'sys/activityMenu',
      activityView: 'sys/activityView',
      breadcrumbRoutes: 'sys/breadcrumbRoutes'
    })
  },
  components: {
    ReloadOutlined, LockFilled, LogoutOutlined, DownOutlined
    , HomeOutlined, NotificationFilled, FullscreenOutlined},
  setup() {
    let msgCount = 0
    let waitCount = 0;
    let workMenu = {}
    let global = inject(GlobalConfigKey);
    let ui = global.ui;
    // 开发环境下展示低代码设计入口
    let isDev = true; //import.meta.env.DEV;
    return {workMenu, msgCount, waitCount, isDev, ui}
  },
  methods: {
    ...mapMutations({
      logout: 'sys/logout',
      removeTask: 'sys/removeTask',
      switchTheme: 'sys/switchTheme',
      toggleUserVisible: 'sys/toggleUserVisible',
      switchActiveViewTo: 'sys/switchActiveViewTo',
      pushAndSwitchTask: 'sys/pushAndSwitchTask'
    }),
    refresh() {
      let path = this.$route.path;
      let route = this.taskBarData.find(route => route.path == path);
      this.reload(route);
    },
    switchTask (url) { // 切换任务菜单处理
      this.pushAndSwitchTask(url);
    },

    fullScreen() {
      screenfull.toggle()
    },
    switchTheme() {
      this.$store.commit('sys/switchTheme', 'pure');
    },
    viewHandler(view) {
      if(view.type == 'G' && this.collapsed) {
        this.collapsed = !this.collapsed;
      }

      this.switchActiveViewTo(view)
    },
    quickOpera({key}) {
      if(key == 'logout') {
        // 注销动作
        logout().then(({code, message}) => {
          if(code == 200) {
            // 跳转到登录页面
            this.$router.push('/login').then(resp=>{
              this.logout(); // 注销成功回调处理
            });
          } else {
            msgError(message);
          }
        }).catch(reason => console.error(reason))
        // 其他快速操作
        // this.toggleUserVisible({visible: true, key});
      } else if(key == 'profile'){
        this.$router.push('/profile');
      }
    },
    loadError() {
      this.user.avatar = '/img/logo.png';
    },
  }
}
</script>

<style>
.u-header-bar {
  z-index: 1000;
}
.u-logo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  vertical-align: middle;
}
.u-ism-title {
  font-size: 18px;
  margin-left: 8px;
  vertical-align: bottom;
}
.u-profile-dropdown {
  vertical-align: -1px;
}
.u-opera-col {
  padding: 0px 12px;
}
.u-opera-col:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.06);
}
.u-header-col-left {
  text-align: left;
  padding-left: 16px;
}
.ivz-header-col-right {
  right: 8px;
  text-align: right;
}
.ivz-header-col-right .anticon {
  font-size: 18px;
}
.ivz-header-col-right .u-opera-col {
  float: right;
}

</style>
